<template>
  <div class="shop">

    <div class="scroll-area">
      <div class="swiper-container">
        <div class="swiper-wrapper">

          <div class="swiper-slide" v-for="item in shopList">
            <div class="img"><a :href="item.url" ><img :src="item.image" alt="" v-if="item.image!=null" > <img v-if="item.image==null" src="https://dummyimage.com/300x300" alt=""></a></div>
            <!--<div class="font"><a @click="redirect(item.product_id)">{{item.name}}</a></div>-->
            <!--<div class="price"><a @click="redirect(item.product_id)">{{item.price}}</a></div>-->
          </div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination" style="display: none"></div>
      </div>
    </div>
    <div class="fenlei-box">
      <ul class="fenli-ul clearfix">
        <li class="fenli-li" v-for="item in categorysub">
          <div class="fenli-box" @click="tosubtype(item.category_id,item.parent_id,item.sort_order,item.status,item.name)">
            <div class="img" v-if="item.image!='' ">
              <img v-if="item.image!=null" :src="item.image" alt="">
            </div>
            <div class="img" v-if="item.image=='' ">

            </div>
            <div class="font">{{item.name}}</div>
          </div>
        </li>
      </ul>
    </div>


    <span class="buy" v-on:click="gotoAddress('/me/shopping')"><i v-if="cartNum !=0" class="mint-badge is-success is-size-small">{{cartNum}}</i></span>



	  <foot-guide></foot-guide>
    <nvshentuijian></nvshentuijian>
  </div>
</template>

<script>
import footGuide from '../components/footGuide'
import nvshentuijian from '../components/nvshentuijian'
import { Toast } from 'mint-ui';
export default {
  name: 'Shop',
  data () {
    return {
      shopList:[],
      categorysub:[],
      tuijianList:[],
      cartNum:0,
    }
  },
  mounted:function(){

    var _this = this;
    $.ajax({
      type:'post',
      url: RouteMap.bannerList,

      success:function(res){
        if(res.code == 200){

        //  console.log(res)
          _this.shopList = res.data;

          setTimeout(function(){
            var swiper = new Swiper('.swiper-container', {
              slidesPerView: "auto",
              paginationClickable: !0,
              spaceBetween: 12,
              freeMode: !0,
              observer: !0,
              observeParents: !0
            });
          },100)

        }
        else{
          //Toast(res.msg)
        }
      }
    })

    setTimeout(function(){

      var categorysubData = {};
      categorysubData.parent_id = 1;
      $.ajax({
        type:'post',
        url: RouteMap.categorysub,
        data:categorysubData,
        success:function(res){
          if(res.code == 200){

            _this.categorysub = res.data;
//            _this.categorysub.push({image:'',name:''})
//            alert(_this.categorysub.length)
            if(_this.categorysub.length %4 !=0)
            {
              var addArrLength = 4 - _this.categorysub.length %4;

              for(var i=0;i<addArrLength;i++){
                _this.categorysub.push({image:'',name:''})
              }
            }

          }
          else{
            //Toast(res.msg)
          }
        }
      })
    })

    this.getCartNum();



  },
  methods:{
    redirect:function(id){
      this.$router.push({path:'/shop/details/'+id});
    },
    gotoAddress(path){
      this.$router.push(path)
    },
    tosubtype:function(category_id,parent_id,sort_order,status,name){
      if(name == '')
      {
        return;
      }
      this.$router.push({path:'/shoptype?type='+category_id+"&typeName="+name});
    },
    getCartNum:function(){

      var token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
      var _this = this;

      if(!token){
        return;
      }

      var ajaxData = {};
      ajaxData.token = token;

      setTimeout(function(){

        $.ajax({
          type:'post',
          url: RouteMap.cartNum,
          data:ajaxData,
          cache:false,
          success:function(res){
            if(res.code == 200){

              _this.cartNum = res.data.num;

            }
            else{
              //Toast(res.msg)
            }
          }
        })
      },100)

    }
  },
  components: {
      footGuide,
      nvshentuijian
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .shop{
    background: #f5f5f5;
    padding-bottom: 3rem;
  }
  .swiper-container {
    width: 100%;
  }
  .swiper-slide {
    text-align: center;
    background: #fff;
    width: 5rem;
    font-size: .5rem;
    padding: .5rem 0;
  }
  .swiper-slide:first-child{
    margin-left: 0.7rem;
  }
  .swiper-slide:last-child{
    margin-right: 0.7rem;
  }
  .swiper-slide .font,.swiper-slide .price{
    text-align: left;
    padding:0 .2rem;
    line-height: .8rem;
  }
  .swiper-slide .font{
    padding-top: .2rem;
  }

  .swiper-slide .img img{
    width: 100%;
  }
  .swiper-slide a{
    color: #6c6c6c;
  }
  .scroll-area{
    background: #fff;
  }
  .fenlei-box{
    background: #fff;
    margin-top: .5rem;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .fenli-li{
    float: left;
    width: 4rem;
    height: 5rem;
    text-align: center;
    margin-top: -1px;
    margin-left: -1px;

  }

  .fenli-li .img img{
    height: 1.6rem;

  }
  .fenli-box{
    width: 100%;
    height: 100%;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
  }
  .fenli-box .img{
    margin-top: 1rem;
  }
  .fenli-box .font{
    padding-top: .4rem;
  }
  .buy{
    position: fixed;
    width: 1.8rem;
    height: 1.8rem;
    background: url("../assets/shop/buy.png");
    background-size: 100% 100%;
    bottom:3rem;
    right: 1rem;
    z-index: 100;
  }
  .buy i{position: absolute; right: -5px; top: -5px; }
</style>
